import {guid} from '@/utils';
import CustomComponent from '@/components/hhd/design/FormDesigner/field/comps/custom/CustomComponent';
import {createButton} from '@/utils/FormDesignUtils';
import $ from 'jquery';

export default class CustomButton extends CustomComponent {
  getFieldComponentTitle() {
    return '自定义按钮';
  }

  getFieldComponentName() {
    return 'customButton';
  }

  getDefaultConfig() {
    return new Promise((resolve, reject) => {
      resolve(createDefaultButtonConfig());
    });
  }

  setFieldTitle(el, fieldConfig) {
    el = $(el).find('.design-button');
    $(el).find('.design-button-label').html(fieldConfig.buttonName);
    $(el).find('.design-button-icon').remove("design-button-icon-has-padding")
    if (fieldConfig.icon) {
      $(el).find('.design-button-icon').show();
      $(el).find('.design-button-icon').html(`&#x${fieldConfig.icon};`);
      if (fieldConfig.buttonName) {
        $(el).find('.design-button-icon').addClass("design-button-icon-has-padding")
      }
    } else {
      $(el).find('.design-button-icon').hide();
    }

    $(el).removeClass('ant-btn-primary');
    $(el).removeClass('ant-btn-dashed');
    $(el).removeClass('ant-btn-danger');
    $(el).removeClass('ant-btn-link');

    $(el).addClass(`ant-btn-${fieldConfig.buttonType}`);

    $(el).removeClass('ant-btn-circle');
    $(el).removeClass('ant-btn-round');
    $(el).addClass(`ant-btn-${fieldConfig.shape}`);
  }

  createFieldElement(config) {
    return new Promise((resolve, reject) => {
      resolve(createButton(config));
    });
  }
}

export function createDefaultButtonConfig() {
  return {
    id: guid(),
    icon: undefined,
    buttonName: '自定义按钮',
    onClick: function (ctx) {}.toString(),
    component: 'customButton',
    shape: 'default',
    buttonType: 'default',
    customComponent: true,
    viewComponent: true
  };
}